<template>
    <div class="cent w" :ListData="ListData">
      <alertLogin></alertLogin>
      <div class="listBox ">
        <div class="title clearfix">
          <div class="left" style="cursor: pointer">发车时间 <span class="el-icon-d-caret"></span> </div>
          <div class="left" style="cursor: pointer"> 时长 <span class="el-icon-d-caret"></span></div>
          <div class="right">
            <p>共搜索到<span class="count">{{page.count}}</span>个线路</p>
          </div>
        </div>
        <div class="Box clearfix">
          <div class="right card" >
            <div v-show="!errorText && isRecommend!=0">
              <p style="color: red;font-size: 14px;padding-bottom: 10px">暂无此类数据，以下为推荐线路！</p>
            </div>
            <div class="" v-show="!errorText">
              <div class="list" v-for="list in tableData2">
                <div class="BoxTop clearfix">
                  <div class="left" v-show="list.origin">
                    <p>
                   <span class="text" >
                      {{list.transMode == 4 ?list.originPort:list.origin}}
                    </span>
                      <span class="icon">
                        <img src="../../../../static/img/icon/go.png" />
                    </span>
                    </p>
                  </div>
                  <!--<div class="left" v-show="list.originPort">-->
                    <!--<p>-->
                    <!--<span class="text" >-->
                        <!--{{list.originPort}}-->
                    <!--</span>-->
                      <!--<span class="icon">-->
                        <!--<img src="../../../../static/img/icon/go.png" />-->
                    <!--</span>-->
                    <!--</p>-->
                  <!--</div>-->
                  <div class="left" v-if="list.transMode==4 && list.origin">
                    <p>
                    <span class="text" >

                       {{list.origin}}
                    </span>
                      <span class="icon">
                        <img src="../../../../static/img/icon/go.png" />
                    </span>
                    </p>
                  </div>
                  <div class="left" v-if="list.transMode !=4 && list.transferStation">
                    <p>
                    <span class="text" >
                      {{list.transferStation}}
                    </span>
                      <span class="icon">
                        <img src="../../../../static/img/icon/go.png" />
                    </span>
                    </p>
                  </div>
                  <div class="left">
                  <span class="text" >
                      {{list.dest}}
                    </span>
                  </div>
                  <div class="right time" v-show="list.durationDes">预计时长：{{list.durationDes}}</div>
                </div>
                <p>
             <span class="adders" v-show="list.departPlan">
                发车时间: {{list.departPlan}}
             </span>
                  <span class="adders" v-show="list.expirationDate">
                截止日期: {{list.expirationDate}}
             </span>
                </p>
                <div class="clearfix bottom" >
                  <div class="left clearfix">
                    <div class="left">
                    <span class="icon">
                        <img src="../../../../static/img/icon/tranFrom.png" />
                    </span>
                      <span class="bottomText">{{list.transMode==1?'班列':list.transMode==2?'直发':list.transMode==3?'中转':list.transMode==4?'海铁联运':''}}</span>
                    </div>
                    <div class="left" >
                    <span class="icon">
                        <img src="../../../../static/img/icon/zhongzhuan.png" />
                    </span>
                      <span class="bottomText">中转站：{{list.transferStation?list.transferStation:'无'}} </span>
                    </div>
                    <div class="left" >
                    <span class="icon">
                        <img src="../../../../static/img/icon/laod.png" />
                    </span>
                      <span class="bottomText">报关站：{{list.customsStation?list.customsStation:'无'}} </span>
                    </div>
                    <div class="left" >
                    <span class="icon">
                        <img src="../../../../static/img/icon/address.png" />
                    </span>
                      <span class="bottomText" style="padding: 0px;margin: 0px;border: 0px none">出境口岸：{{list.transitPort?list.transitPort:'无'}} </span>
                    </div>
                  </div>
                  <div class="right">
                    <el-button type="" :us="us" size="mini" @click="goChart('searchChart',list.number)">
                      查看详情
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="errorText" v-show="errorText">
                <p>{{errorText}}</p>
          </div>
          </div>
          <div class=" map">
           <mapDate></mapDate>
          </div>
        </div>
      </div>
      <div class="" style="text-align: right" :fromData="fromData.lcl">
        <el-pagination layout="prev, pager, next" :page-size="page.pageSize" :total="page.count" @current-change="handleCurrentChange">

        </el-pagination>
      </div>


    </div>
</template>
<style scoped>


  .Box{position: relative;background-color: #fff}
  .errorText p{ font-size: 20px;font-weight: bold;color: #999;line-height: 200px;text-align: center}
  p{text-align: left;font-size: 14px;}
  .list{border-bottom: 1px solid #e1e1e1;padding: 30px 15px;}
  .list span{font-size: 14px;}
  .list .adders{background:#0062a2;margin-right: 10px;color: #fff;padding: 2px 5px;line-height: 30px;}
  .bottom{padding-top: 20px}
  .bottom .icon{margin-right: 0px;}
  .time{color: #999;font-size: 14px}
  .bottom  .bottomText{padding-right: 20px;margin-right: 10px; border-right: 1px solid #f1f1f1}
  .card{width: 68.5%;margin-right: 31.5%;padding: 20px 0px;min-height: 600px}
  .list:hover{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
  .map{width: 30%;height: 360px;border: 1px solid #e1e1e1;position: absolute;right: 0px;top: 20px}
  .list .text{margin-right: 5px;font-size: 20px;font-weight: bold;}
  .icon{margin-right: 5px}
  .icon img{position: relative;top: 5px}
.title{line-height: 30px;padding: 5px 0px;background-color: #f2f2f2}
.title .left, .title .right{padding: 0px 20px;font-size: 12px;color: #000}
.count{ font-size: 18px;padding: 0px 5px}
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import alertLogin from '@/components/public/alertLogin.vue'
  import map from '@/components/lanwan/pager/map2.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  import imgdeift from '../../../../static/img/icon/newsDeft.png'
  // import  Public from "../../../vuex/public";
  export default {
    name: 'my-adminChart',

    data () {
      return {
        user:'',
        errorText:"",
       page:{
         page:1,
         pageSize: 10,
         count:0
       },
        isRecommend:0,// 是否推荐线路 0不是，1是
        tableData2:[],
        locationsList:[]
      }
    },
    methods: {
      ...mapActions({
        searchList:'searchList'
      }),
      // 上下页
      handleCurrentChange (val) {
        this.page.page = parseInt(val)
        this.sechlistFn()
      },
      login () {
        this.$router.push({ name: 'map' })
      },
      ifLogin(){
        var res = true
           if(this.user){
             if(this.user.type != 1){
               res = false
             }
           }else {
             res = false
           }
         return res
      },
      // 列表查询
      goChart(name,id){
        if(this.user){
          if(this.user.type == 1 && this.user.admin!=1){
            this.$router.push({ name: name,query:{id:id}})
          }else {
            this.$store.commit('updaeAlertShow', 'show')
          }
        }else {
          this.$store.commit('updaeAlertShow', 'show')
        }

      },
      // 列表解析
      transportListFn(res){
        this.locationsList=[];
        this.tableData2 = []
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.page.count = cunt
        }else {
          this.errorText = '暂无该类型数据'
        }
        this.isRecommend =  res.body.data.isRecommend
        res = res.body.data.transLineList
        for(let i in res){
          // 解析城市
          var origin = Public.publicLo.getCityById(res[i].origin),
            originPort= Public.publicLo.getCityById(res[i].originPort),
            customsStation = Public.publicLo.getCityById(res[i].customsStation),
            transitPort = Public.publicLo.getCityById(res[i].transitPort),
            transferStation= Public.publicLo.getCityById(res[i].transitPort),
            dest =  Public.publicLo.getCityById(res[i].dest),
            departTime = '',
            duration = '';
          //
          if(origin){origin = origin.stationCN}
          if(originPort){originPort = originPort.stationCN}
          if(customsStation){customsStation = customsStation.stationCN}
          if(transitPort){transitPort = transitPort.stationCN}
          if(dest){dest = dest.stationCN}
          if(res[i].departTime){
            departTime = Public.publicLo.timeCheng(res[i].departTime).ymd
          }
          if(res[i].duration){
            duration = Public.publicLo.timeCheng(res[i].duration).ymd
          }
          var pu={
            // id:res[i].id,
            "number":res[i].number,//路线编号
            "transMode":res[i].transMode,//运输模式
            "originPort":originPort,//起始港
            "origin":origin,//起始站
            "transferStation":Public.publicLo.getCityById(res[i].transferStation).stationCN ||'',//中转站
            "customsStation":customsStation,//报关站
            "transitPort":transitPort,//过境口岸
            "dest":dest,//目的站
            "departTime":departTime,//最早发车时间
            "duration":duration,// 线路时长
            durationDes:res[i].durationDes,
            departPlan:res[i].departPlan,// 发车时间
            "lcl":res[i].lcl==1?'拼箱':'整箱',// 是否拼箱 0 ：n ，1：y
            expirationDate:res[i].expirationDate,//截至日期
          }
          var list = res[i].locations || []

          if(res[i].locations){
            list = list.sort(this.compare('time'),false)

          }
          this.locationsList.push(list)
          this.tableData2.push(pu)
        }
        this.$store.commit('commitMapList',this.locationsList)
        this.$store.commit('transportListTo',0)
      },
      sechlistFn () {
        var parm = {
          origin:this.fromData.origin,
          dest:this.fromData.dest,
          lcl:this.fromData.lcl,
          originSite:this.fromData.originSite,
          destSite:this.fromData.destSite,
          page:this.page.page,
          pageSize:this.page.pageSize
        }
        this.searchList(parm)
      },
      // 排序算法
      compare:function(property,x){
        return function(a,b){
          var value2 = a[property];
          var value1 = b[property];
          return x?value1 - value2:value2 - value1;
        }
      },
    },
    computed: {
      ListData: function () {
        var parm = this.transportList
        if(parm){
          this.locationsList=[];
          this.tableData2 = []
          this.errorText = ''
          this.transportListFn(parm)
        }
        return 1
      },
      us: function () {
        var parm = this.userData
        if(parm){
          this.user = parm.data
        }
        return 1
      },
      fromData:function () {
        return this.searchParam
      },
      ...mapState([
        'transportList',
        'updateStatus',
        'language',
        'userData',
        'searchParam'
      ])
    },
    mounted () {
      window.scrollTo(0,400)
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
      alertLogin:alertLogin,
      mapDate:map
    }
  }
</script>

